<template>
	<view class="container">
		<view class="header">
			<view class="title">{{notice.title || '加载中...'}}</view>
			<view class="info">
				<text class="time">{{formatDate(notice.createTime)}}</text>
				<text class="type" :class="notice.type === 1 ? 'important' : 'normal'">
					{{notice.type === 1 ? '重要公告' : '普通公告'}}
				</text>
			</view>
		</view>
		
		<view class="content">
			<rich-text :nodes="formatRichText(notice.content)"></rich-text>
		</view>
	</view>
</template>

<script>
import { formatDate } from '@/utils/date.js';
import { http } from '@/utils/request.js';

export default {
	data() {
		return {
			id: null,
			notice: {
				title: '',
				content: '',
				createTime: '',
				type: 0
			}
		}
	},
	onLoad(options) {
		if (options && options.id) {
			this.id = options.id;
			this.getNoticeDetail();
		} else {
			uni.showToast({
				title: '参数错误，未找到公告ID',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	},
	methods: {
		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '';
			return formatDate(new Date(dateStr), 'yyyy-MM-dd HH:mm');
		},
		// 格式化富文本内容
		formatRichText(content) {
			if (!content) return '';
			// 简单处理换行符
			return content.replace(/\n/g, '<br>');
		},
		// 获取公告详情
		async getNoticeDetail() {
			uni.showLoading({
				title: '加载中...'
			});
			
			try {
				const res = await http.get('/api/repairNotice/getDetail', {
					id: this.id
				});
				
				if (res.data) {
					this.notice = res.data;
				} else {
					uni.showToast({
						title: '获取公告详情失败',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			} catch (error) {
				uni.showToast({
					title: '获取详情失败，请稍后再试',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} finally {
				uni.hideLoading();
			}
		}
	}
}
</script>

<style>
.container {
	background-color: #fff;
	min-height: 100vh;
	padding: 30rpx;
}

.header {
	border-bottom: 1px solid #eee;
	padding-bottom: 30rpx;
	margin-bottom: 30rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	margin-bottom: 20rpx;
}

.info {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.time {
	font-size: 26rpx;
	color: #999;
}

.type {
	font-size: 24rpx;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
}

.normal {
	background-color: #e1f3d8;
	color: #67c23a;
}

.important {
	background-color: #fde2e2;
	color: #f56c6c;
}

.content {
	font-size: 30rpx;
	color: #333;
	line-height: 1.8;
}
</style> 